<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="cartList.length == 0" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="">
				<uv-swipe-action :autoClose="false">
					<uv-swipe-action-item :options="options" :autoClose="false" v-for="(item, index) in cartList" :key="item.id" @click="deleteCartItem(item)">
						<block>
							<view class="cart-item">
								<view class="image-wrapper">
									<image v-if="item.goodsSpecification.length > 0" :src="item.goodsSpecification[0].specificationImages" mode=""></image>
									<image v-else :src="item.plugsGoods.rotationImgsJson[0]" mode=""></image>
									<view class=""></view>
									<view class="yticon icon-xuanzhong2 checkbox" :class="{ checked: item.checked }" @click="check('item', index)">
										<uv-icon name="checkmark-circle" size="22" color="item.checked?'#999':'red'"></uv-icon>
									</view>
								</view>
								<view class="item-right">
									<text class="clamp title">{{ item.plugsGoods.goodsName }}</text>
									<view class="one" v-if="item.goodsSpecification.length > 0">
										{{
											item.goodsSpecification[0].specificationName
												.replace(/\"/g, '')
												.replace(/\{|}/g, '')
												.replace(/\,/g, '+')
										}}
									</view>
									
									<view class="one" v-else>默认</view>
									<view class="two">
										<text class="price" v-if="item.goodsSpecification.length > 0">¥ {{ item.goodsSpecification[0].dealPrice }}</text>
										<text class="price" v-else>¥{{ item.plugsGoods.goodsPrice }}</text>
										<view class="numbox">
											<view
												class="minus"
												@click="numberChange(index, 'jian')"
												:style="{
													backgroundColor: item.goodsNum <= 1 ? '#eee' : '#ff633d'
												}"
											>
												<uv-icon name="minus" size="16" color="#fff"></uv-icon>
											</view>
											<text class="input">{{ item.goodsNum }}</text>
											<view class="minus" @click="numberChange(index, 'jia')"><uv-icon name="plus" size="16" color="#fff"></uv-icon></view>
										</view>
									</view>
								</view>
								<!-- <view class="del-btn yticon icon-fork"><uv-icon name="close" size="20" color="red"></uv-icon></view> -->
							</view>
						</block>
					</uv-swipe-action-item>
				</uv-swipe-action>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked ? '/static/selected.png' : '/static/select.png'" mode="aspectFit" @click="check('all')"></image>
					<view class="clear-btn" :class="{ show: allChecked }" @click="clearCart">清空</view>
				</view>
				<view class="total-box">
					<text class="price">¥{{ total }}</text>
					<!-- <text class="coupon">
						已优惠
						<text>74.35</text>
						元
					</text> -->
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
import { insertPlugsShopCart, getPlugsShopCartByUserId, delPlugsShopCart, updatePlugsShopCart } from '../../utils/api.js';
export default {
	data() {
		return {
			total: 0, //总价格
			allChecked: false, //全选状态  true|false
			empty: false, //空白页现实  true|false
			cartList: [],
			nowBusinessInfo: {},
			orderPage: {
				page: 1,
				size: 10
			},
			options: [
				{
					text: '删除'
				}
			]
		};
	},
	onLoad() {
		// this.loadData();
	},
	onShow() {
		this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
		if (uni.getStorageSync('userInfo')) {
		} else {
			uni.showToast({
				icon: 'error',
				title: '登录失效'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			}, 500);
		}
		this.getCartList();
	},
	watch: {
		//显示空白页
		cartList(e) {
			// let empty = e.length === 0 ? true : false;
			// if (this.empty !== empty) {
			// 	this.empty = empty;
			// }
		}
	},

	methods: {
		//请求数据
		getCartList() {
			let postdata = {
				page: this.orderPage.page,
				size: this.orderPage.size,
				businessId: this.nowBusinessInfo.jsonViewData.businessId.toString()
			};
			getPlugsShopCartByUserId(postdata).then(res => {
				if (res.code === 200) {
					this.cartList = res.body.list;
					this.cartList.map(item => {
						if(item.plugsGoods.rotationImgsJson){
							item.plugsGoods.rotationImgsJson=JSON.parse(item.plugsGoods.rotationImgsJson)
						}
						item.checked = true;
						return item;
					});
					console.log(this.cartList, 9988);
					this.calcTotal(); //计算总价
				}
			});
		},
		async loadData() {
			let list = await this.$api.json('cartList');
			let cartList = list.map(item => {
				// item.checked = true;
				return item;
			});
			this.cartList = cartList;
			console.log(this.cartList, 9988888);
			this.calcTotal(); //计算总价
		},

		//选中状态处理
		check(type, index) {
			console.log(type, index);
			if (type === 'item') {
				this.cartList[index].checked = !this.cartList[index].checked;
			} else {
				const checked = !this.allChecked;
				const list = this.cartList;
				list.forEach(item => {
					item.checked = checked;
				});
				this.allChecked = checked;
			}
			console.log(456, 963333);
			this.calcTotal(type);
		},
		//数量
		numberChange(index, type) {
			let nums = this.cartList[index].goodsNum;
			let list = this.cartList[index].goodsSpecification;
			let stok = 0;

			let data = {
				businessId: this.cartList[index].businessId,
				goodsCategoryId: this.cartList[index].goodsCategoryId,
				goodsSpecificationIds: this.cartList[index].goodsSpecificationIds,
				goodsNum: 1,
				goodsId: this.cartList[index].goodsId,
				type: 0
			};
			if (list.length == 0) {
				stok = this.cartList[index].plugsGoods.stockNum;
			} else {
				stok = this.cartList[index].goodsSpecification[0].stockNum;
			}
			if (type === 'jian') {
				if (nums > 1) {
					data.type = 1;
					insertPlugsShopCart(data).then(res => {
						// console.log("insertPlugsShopCart", res)
						if (res.code == 200) {
							this.cartList[index].goodsNum--;
							this.getCartList();
						} else {
						}
					});
				} else {
					return;
				}
			} else if (type === 'jia') {
				if (nums < stok) {
					data.type = 0;
					insertPlugsShopCart(data).then(res => {
						// console.log("insertPlugsShopCart", res)
						if (res.code == 200) {
							this.cartList[index].goodsNum++;
							this.getCartList();
						} else {
						}
					});
				} else {
					uni.showToast({
						title: '已超过最大库存数量',
						icon: 'none'
					});
					return;
				}
			}
		},
		//删除
		deleteCartItem(item) {
			uni.showModal({
				content: '删除此商品？',
				success: e => {
					if (e.confirm) {
						let postData = {
							ids: item.id
						};
						delPlugsShopCart(postData).then(res => {
							if (res.code == 200) {
								this.getCartList();
							}
						});
					}
				}
			});

			// let list = this.cartList;
			// let row = list[index];
			// let id = row.id;

			// this.cartList.splice(index, 1);
			// this.calcTotal();
			// uni.hideLoading();
		},
		//清空
		clearCart() {
			let list = [];
			this.cartList.forEach(item => {
				list.push(item.id);
			});
			uni.showModal({
				content: '清空购物车？',
				success: e => {
					if (e.confirm) {
						let postData = {
							ids: list.join()
						};
						delPlugsShopCart(postData).then(res => {
							if (res.code == 200) {
								this.getCartList();
							}
						});
					}
				}
			});
		},
		//计算总价
		calcTotal() {
			let list = this.cartList;

			let total = 0;
			let checked = true;
			list.forEach(item => {
				if (item.checked === true) {
					console.log(item.plugsGoods.goodsPrice, item.goodsNum, 456);
					if (item.goodsSpecification.length > 0) {
						total += item.goodsSpecification[0].dealPrice * item.goodsNum;
					} else {
						total += item.plugsGoods.goodsPrice * item.goodsNum;
					}
				} else if (checked === true) {
					checked = false;
				}
			});
			this.allChecked = checked;
			this.total = Number(total.toFixed(2));
		},
		//创建订单
		createOrder() {
			let list = this.cartList;
			let goodsData = [];
			list.forEach(item => {
				if (item.checked) {
					goodsData.push(item);
				}
			});
			console.log(goodsData);
			uni.navigateTo({
				url: `/pages/order/createOrder?data=${encodeURIComponent(JSON.stringify(goodsData))}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-bottom: 134rpx;
	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
		image {
			width: 240rpx;
			height: 160rpx;
			margin-bottom: 30rpx;
		}
		.empty-tips {
			display: flex;
			font-size: 26rpx;
			color: #c0c4cc;
			.navigator {
				color: #ff633d;
				margin-left: 16rpx;
			}
		}
	}
}
/* 购物车列表项 */
.cart-item {
	display: flex;
	position: relative;
	padding: 20rpx 40rpx;
	border-bottom: 1rpx solid #f5f5f5;
	.image-wrapper {
		width: 150rpx;
		height: 150rpx;
		position: relative;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 15rpx;
			opacity: 1;
		}
	}
	.checkbox {
		position: absolute;
		left: -16rpx;
		top: -16rpx;
		z-index: 8;
		font-size: 44rpx;
		line-height: 1;
		padding: 4rpx;
		color: #c0c4cc;
		background: #fff;
		border-radius: 50px;
	}
	.item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		overflow: hidden;
		position: relative;
		padding-left: 30rpx;
		.title,
		.price {
			font-size: 30rpx;
			color: #303133;
			height: 40rpx;
			line-height: 40rpx;
		}
		.attr {
			font-size: 26rpx;
			color: #909399;
			height: 50rpx;
			line-height: 50rpx;
		}
		.price {
			height: 50rpx;
			line-height: 50rpx;
			color: red;
		}
		.one {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
		}
		.two {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.numbox {
			display: flex;
			align-items: center;
			.minus {
				background-color: #ff633d;
				height: 40rpx;
				width: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
			}
			.input {
				width: 80rpx;
				height: 40rpx;
				text-align: center;
				background-color: #eee;
				margin: 0 10rpx;
				border-radius: 20rpx;
			}
		}
	}
	.del-btn {
		padding: 4rpx 10rpx;
		font-size: 34rpx;
		height: 50rpx;
		color: #909399;
	}
}
/* 底部栏 */
.action-section {
	/* #ifdef H5 */
	margin-bottom: 100rpx;
	/* #endif */
	position: fixed;
	left: 30rpx;
	bottom: 30rpx;
	z-index: 95;
	display: flex;
	align-items: center;
	width: 630rpx;
	height: 100rpx;
	padding: 0 30rpx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16rpx;
	.checkbox {
		height: 52rpx;
		position: relative;
		image {
			width: 52rpx;
			height: 100%;
			position: relative;
			z-index: 5;
		}
	}
	.clear-btn {
		position: absolute;
		left: 26rpx;
		top: 0;
		z-index: 4;
		width: 0;
		height: 52rpx;
		line-height: 52rpx;
		padding-left: 38rpx;
		font-size: 28rpx;
		color: #fff;
		background: #c0c4cc;
		border-radius: 0 50px 50px 0;
		opacity: 0;
		transition: 0.2s;
		&.show {
			opacity: 1;
			width: 120rpx;
		}
	}
	.total-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: right;
		padding-right: 40rpx;
		.price {
			font-size: 32rpx;
			color: #303133;
		}
		.coupon {
			font-size: 24rpx;
			color: #909399;
			text {
				color: #303133;
			}
		}
	}
	.confirm-btn {
		padding: 0 38rpx;
		margin: 0;
		border-radius: 100px;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx + 2rpx;
		background: #ff633d;
		box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72);
	}
}
/* 复选框选中状态 */
.action-section .checkbox.checked,
.cart-item .checkbox.checked {
	color: #ff633d;
}
</style>
